<!-- 项目专家费 -->
<template>
	<view style="background-color: #F7F7F7;">
		<!-- 顶部标题 -->
		<view class="head_text">
			<text v-if="editId">{{ project_name + '-编辑项目专家费' }}</text>
			<text v-else>{{ project_name + '-新增项目专家费' }}</text>
			<image
				src="../../../../static/client/back.png"
				style="width: 20rpx;height: 36rpx;position: absolute;left: 30rpx;top: 63rpx;"
				@click="back()"
			></image>
		</view>
		<view v-if="editId" class="stepRow">
			<image
				class="stepIcon"
				src="../../../../static/images/jindu1.png"
				v-if="!planeStatus"
				@click="handleChekcPlan"
				mode=""
			></image>
			<image
				class="stepIcon"
				src="../../../../static/images/jindu2.png"
				v-if="planeStatus"
				@click="handleChekcPlan"
				mode=""
			></image>
			<view class="finnaceStep" v-if="planeStatus">
				<view class="MyStep" v-for="(item, index) in stepList">
					<view class="stepLine" v-if="!(index == stepList.length - 1)"></view>
					<view class="stepRow1">
						<image
							class="stepIdot"
							src="../../../../static/images/icon_jd1@2x.png"
							mode=""
						></image>
						<text class="stepdate" style="width:300rpx">{{ item.add_time }}</text>
						<text class="stepdate">{{ item.memberInfo.nickname + ' 提交' }}</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '0'">
						<text class="stepusername" style="margin-left:50rpx">
							<text v-for="items in item.tomemberInfo">
								{{ items.nickname + ' ' }}
							</text>
						</text>
						<text class="stepstatus">待审批</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '1'">
						<text class="stepusername" style="margin-left:50rpx">
							{{ item.executorInfo.nickname }}
						</text>
						<text class="stepusername" style="width:280rpx">
							{{ item.update_time }}
						</text>
						<text style="color:rgb(18, 139, 241)" class="stepstatus">通过</text>
					</view>
					<view class="stepRow2" v-if="item.approval_status == '-1'">
						<text class="stepusername" style="margin-left:50rpx">
							{{ item.executorInfo.nickname }}
						</text>
						<text class="stepusername" style="width:280rpx">
							{{ item.update_time }}
						</text>
						<text style="color:rgb(255, 51, 51)" class="stepstatus">驳回</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 客户信息 -->
		<scroll-view scroll-y class="client_info" :class="editId ? 'ischeckOutInfo' : ''">
			<!-- 审批备注 -->
			<view
				class="textAreaRow"
				v-if="
					addReimbursementForm.approval_status &&
						addReimbursementForm.approval_status == '1'
				"
			>
				<view class="textTitle">审批备注</view>
				<textarea v-model="aprovalRemark" class="textar" placeholder-style="margin:30rpx" />
			</view>
			<!-- 结算金额 -->
			<view style="overflow: hidden;">
				<view class="info_item">
					<view class="Warptitle">结算金额</view>
					<input
						:disabled="isDisable"
						style="margin-top: 39rpx; padding-bottom: 10rpx;"
						placeholder="请输入"
						v-model="addReimbursementForm.total"
						placeholder-style="color:#999999;"
					/>
				</view>
				<!-- 备注 -->
				<view class="textAreaRow">
					<view class="textTitle">备注</view>
					<textarea
						:disabled="isDisable"
						v-model="addReimbursementForm.remark"
						class="textar"
						placeholder="多行输入"
						placeholder-style="margin:30rpx"
					/>
				</view>
				<!-- 图片上传 -->
				<view class="upLoadRow">
					<view class="upTitle">
						<view>图片上传</view>
						<view v-if="!isDisable" @click="selectImg" class="uploadBtn">
							<image src="../../../../static/firm/icon_sc.png" class="upImg"></image>
							<text class="upLoadText">点击上传文件</text>
						</view>
					</view>
					<view class="imgList">
						<view class="imgItem" style="margin-right: 10rpx;" v-for="item in imgList">
							<image
								@click="handleCheckOutImgItem(item)"
								class="imgItem"
								:src="item"
							></image>
							<view v-if="!isDisable" class="closeBox" @click="removeImg(item)">
								<uni-icons type="closeempty" color="#fff" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<!-- 关联项目 -->
				<view class="info_item" @click="ShowProjectType" style="margin-bottom: 76rpx;">
					<view class="Warptitle">关联项目</view>
					<view class="selectEdit">
						<view class="client_type">{{ project_name }}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view v-if="addReimbursementForm.approval_status == '1'">
				<button
					class="bottom_btn"
					style="background: #CCCCCC; width: 380rpx;"
					@click="handleApprovel('-1')"
					form-type="reset"
				>
					驳回
				</button>
				<button
					class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					@click="handleApprovel('1')"
					form-type="submit"
				>
					审批通过
				</button>
			</view>
			<view v-else>
				<button
					class="bottom_btn"
					style="background: #CCCCCC; width: 380rpx;"
					@click="handleCancelClick"
					form-type="reset"
					v-if="!isDisable"
				>
					取消
				</button>
				<button
					class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-if="editId && !isDisable"
					@click="handleSubmitEdit"
					form-type="submit"
				>
					编辑
				</button>
				<button
					class="bottom_btn"
					style="background: linear-gradient(0deg, #037CE3, #2EB3FF); margin-top: -88rpx;margin-left: 50%;"
					v-if="!editId && !isDisable"
					@click="handleSubmitAdd"
					form-type="submit"
				>
					确定
				</button>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog" :mask-click="true">
			<view class="noticDetails">
				<view class="closeIcon" @click="close">
					<image
						style="width:52rpx;height: 52rpx;"
						src="../../../../static/images/Close_icon@2x.png"
					></image>
				</view>
				<view class="detailsImg">
					<image class="datalisImg" :src="showUrl" mode="aspectFit"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addReimbursementForm: {
				total: '',
				remark: '',
				annex: '',
				project_id: []
			},
			imgList: [],
			client_project_name: [],
			client_project_name_show: '',
			projectList: [],
			isShowProjectType: false,
			planeStatus: false,
			checkId: '',
			searchInfoProject: '',
			editId: '',
			token: '',
			member_id: '',
			company_id: '',
			projectTypeList: [],
			isShowClientType: false, //控制客户类型选择是否显示
			client_type_name: '项目实施相关费用',
			addFormData: {
				type: '1',
				remark: '',
				date: ''
			},
			project_id: '',
			project_name: '',

			stepList: [],
			aprovalRemark: '',
			isDisable: false,
			showUrl: ''
		};
	},
	onShow() {
		// this.getProjectType()
	},
	async onLoad(options) {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
		this.editId = options.finnaceId || '';
		this.project_id = options.project_id || '';
		this.project_name = options.project_name || '';
		this.getProjectList();
		if (this.editId) {
			setTimeout(() => {
				this.getClientDetails();
			});
		}
	},
	// 开启微信发送给朋友
	//#ifdef MP-WEIXIN
	onShareAppMessage() {
		return{
			path:'/packageProject/pages/project/projectFinnace/projectFinnaceExpert?project_id='+this.project_id
		}
	},
	//#endif
	methods: {
		// 点击取消按钮触发
		close() {
			this.$refs.popup.close();
		},
		// 点击图片出现
		handleCheckOutImgItem(val) {
			this.showUrl = val;
			this.$refs.popup.open();
			// this.checkOutImgIndex = this.imgList.findIndex((item) => item === val)
			// if (this.checkOutImgIndex != -1) {
			//   this.imgDia = true
			// }
		},
		handleCancelClick() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 审批提交
		async handleApprovel(val) {
			const { data: res } = await this.$myRequest({
				url: 'Management/finance_approval',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					finance_id: this.editId,

					stage_code: 'expert',
					approval_status: val,
					remark: this.aprovalRemark
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			uni.showToast({
				title: res.datas.msg,
				icon: 'none'
			});
			uni.navigateBack({
				delta: 1
			});
		},
		// 新增提交
		async handleSubmitAdd() {
			const { data: res } = await this.$myRequest({
				url: 'Finance/expert_add',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,

					total: this.addReimbursementForm.total,
					remark: this.addReimbursementForm.remark,
					annex: JSON.stringify(this.imgList),
					project_id: this.project_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			uni.showToast({
				title: res.datas.msg,
				icon: 'none'
			});
			uni.navigateBack({
				delta: 1
			});
		},
		// 编辑提交
		async handleSubmitEdit() {
			const { data: res } = await this.$myRequest({
				url: 'Finance/expert_edit',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,
					finance_id: this.editId,

					total: this.addReimbursementForm.total,
					remark: this.addReimbursementForm.remark,
					annex: JSON.stringify(this.imgList),
					project_id: this.project_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			uni.showToast({
				title: res.datas.msg,
				icon: 'none'
			});
			uni.navigateBack({
				delta: 1
			});
		},
		// 如果有客户id(获取详情)
		async getClientDetails() {
			// this.addReimbursementForm = {}
			const { data: res } = await this.$myRequest({
				url: 'Finance/expert_detail',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id,

					finance_id: this.editId
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});
			this.addReimbursementForm = res.datas.info;
			console.log('报销详情', this.addReimbursementForm);
			// ***处理绑定项目id
			this.addReimbursementForm.project_id = [];
			this.addReimbursementForm.project_list.forEach(item => {
				this.addReimbursementForm.project_id.push(item.project_id);
				this.client_project_name.push(item.project_name);
			});
			// --处理显示的项目id
			this.client_project_name_show = this.client_project_name.join(',');
			this.projectList.forEach(item => {
				this.addReimbursementForm.project_id.forEach(items => {
					if (item.project_id == items) {
						item.isChekced = true;
					}
				});
			});

			// ***处理文件
			if (this.addReimbursementForm.annex) {
				this.imgList = this.addReimbursementForm.annex;
			}
			// 判断是否禁用
			if (
				this.addReimbursementForm.approval_status &&
				this.addReimbursementForm.approval_status == '1'
			) {
				this.isDisable = true;
			}
			if (this.addReimbursementForm.is_edit != '1') {
				this.isDisable = true;
			}
			// ***处理项目流程
			if (this.addReimbursementForm.approval_log) {
				this.stepList = this.addReimbursementForm.approval_log;
			}

			// ***处理报销类型
			if (this.addReimbursementForm.type == '1') {
				this.client_type_name = '项目实施相关费用';
			} else if (this.addReimbursementForm.type == '2') {
				this.client_type_name = '业务相关费用';
			} else if (this.addReimbursementForm.type == '3') {
				this.client_type_name = '招待费';
			} else if (this.addReimbursementForm.type == '4') {
				this.client_type_name = '其他（写备注里）';
			}
		},
		// 获取项目列表
		async getProjectList() {
			const { data: res } = await this.$myRequest({
				url: 'Project/simple_project',
				method: 'POST',
				data: {
					member_id: this.member_id,
					token: this.token,
					company_id: this.company_id
				}
			});
			if (res.code != 200)
				return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				});

			this.projectList = res.datas.listInfo;
			this.projectList.forEach(item => {
				item.isChekced = false;
			});
			console.log('项目列表(用于表单选项)', this.projectList);
		},
		handleCancleClick() {
			uni.navigateBack();
		},
		// 移除图片
		removeImg(item) {
			const index = this.imgList.findIndex(img => img == item);
			// console.
			if (index != -1) {
				this.imgList.splice(index, 1);
			}
		},
		// 上传图片
		selectImg() {
			var that = this;
			uni.chooseImage({
				count: 6, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: async res => {
					const tempFilePaths = res.tempFilePaths;
					that.phone = res.tempFilePaths[0];
					tempFilePaths.forEach(item => {
						uni.uploadFile({
							url: 'https://control.sxpz.vip/index.php/AppApi/User/uploadImg',
							filePath: item,
							name: 'file',
							formData: {
								member_id: this.member_id,
								token: this.token
							},
							success: uploadFileRes => {
								const result = JSON.parse(uploadFileRes.data);
								this.imgList.push(result.datas.img_url);
							}
						});
					});
				}
			});
		},
		handleClickInput() {
			this.isShowClientType = true;
		},
		handleSearchProject() {
			console.log(1);
			this.isShowClientType = true;
		},
		// 点击选择报销类型
		changeClientType(item) {
			this.client_type_name = item.name;
			this.addReimbursementForm.type = item.id;
			console.log('选择客户类型', this.addReimbursementForm.type);
			// this.isShowClientType = false
		},
		// 显示报销类型选择
		ShowClientType() {
			this.isShowClientType = !this.isShowClientType;
			this.isShowProjectType = false;
		},
		// 点击选择项目
		changeProjectType(item, indexs) {
			this.projectList[indexs].isChekced = !this.projectList[indexs].isChekced;
			let index = this.addReimbursementForm.project_id.findIndex(my => my == item.project_id);
			if (index == -1) {
				this.client_project_name.push(item.project_show);
				this.addReimbursementForm.project_id.push(item.project_id);
			} else {
				this.client_project_name.splice(index, 1);
				this.addReimbursementForm.project_id.splice(index, 1);
			}
			this.client_project_name_show = this.client_project_name.join(',');
			console.log(item);

			console.log(this.addReimbursementForm.project_id);
		},
		// 显示选择项目
		ShowProjectType() {
			this.isShowProjectType = !this.isShowProjectType;
			this.isShowClientType = false;
		},
		bindStartDateChange(e) {
			this.addReimbursementForm.date = e.target.value;
		},
		// 点击查看进度
		handleChekcPlan() {
			this.planeStatus = !this.planeStatus;
		},
		// 点击左上返回按钮
		back() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style scoped lang="scss">
.stepRow {
	position: relative;
	display: flex;
	justify-content: flex-end;

	.stepIcon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		margin-right: 30rpx;
	}

	.finnaceStep {
		position: absolute;
		top: 70rpx;
		right: 30rpx;
		width: 630rpx;
		background: #ffffff;
		z-index: 99;
		box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		padding: 48rpx 30rpx;
		border-radius: 20px;

		.MyStep {
			position: relative;

			.stepLine {
				position: absolute;
				width: 2px;
				height: 122rpx;
				left: 12rpx;
				top: 22rpx;
				background-color: #40a0f2;
			}

			.stepRow1 {
				display: flex;
				align-items: center;

				.stepIdot {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.stepdate {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #128bf1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.stepRow2 {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.stepusername {
					margin-left: 20rpx;
					width: 120rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.stepstatus {
					margin: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #19af3c;
				}
			}
		}
	}
}

.oneRowTwo {
	margin-top: 40rpx;
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	align-items: center;

	.oneRowtitle {
		width: 130rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.onRowInput {
		padding-left: 10rpx;
		font-size: 28rpx;
		width: 192rpx;
		height: 60rpx;
		border-radius: 10rpx;
		border: 1px solid #dfdfdf;
	}

	.picker_input {
		width: 240rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 10rpx;
		background: #ffffff;
		border: 1px solid #dfdfdf;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
}

.bottom {
	width: 100%;
	height: 88rpx;
	position: fixed;
	bottom: 0;
	z-index: 99;
}

.bottom_btn {
	width: 375rpx;
	height: 88rpx;
	margin-left: 0;
	border-radius: 0;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}

.textAreaRow {
	.textTitle {
		margin-top: 49rpx;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
}

.upLoadRow {
	.imgList {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 0 10rpx;
		margin: 20rpx;

		.imgItem {
			position: relative;
			width: 160rpx;
			height: 134rpx;
			margin-bottom: 20rpx;
		}

		.closeBox {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			background-color: #007aff;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 0;
			top: 0;
		}
	}

	.upTitle {
		margin-top: 49rpx;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		margin-bottom: 30rpx;

		.uploadBtn {
			display: flex;
			align-items: center;

			.upImg {
				width: 25rpx;
				height: 18rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
			}

			.upLoadText {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #128bf1;
			}
		}
	}
}

.textar {
	width: 660rpx;
	height: 225rpx;
	background: #f7f7f7;
	margin-top: 30rpx;
	margin-left: 30rpx;
	padding: 20rpx;
}

.client_type_change {
	width: 550rpx;
	// height: 180rpx;
	background: #ffffff;
	box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	position: absolute;
	top: 54rpx;
	right: 30rpx;
	z-index: 99;

	.item_info {
		width: 100%;
		height: 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
	}
}

.client_project_change {
	width: 550rpx;
	height: 460rpx;
	background: #ffffff;
	box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	position: absolute;
	top: -460rpx;
	right: 0rpx;
	z-index: 99;

	.searchInput {
		position: relative;

		.sInput {
			padding-left: 20rpx;
			margin: 20rpx auto;
			width: 510rpx;
			height: 60rpx;
			border-radius: 60rpx;
			background-color: #f7f7f7;
		}

		.sousuo_img {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			z-index: 999;
			right: 40rpx;
			top: 20rpx;
		}
	}

	.item_info {
		width: 100%;
		height: 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 60rpx;
	}
}

.ischeckOutInfo {
	height: calc(100vh - 158rpx - 70rpx) !important;
}

.client_info {
	width: 100%;
	height: calc(100vh - 236rpx);
	background-color: #fff;

	.info_title {
		width: 100%;
		height: 102rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		border-bottom: 1px solid #e9e9e9;
		line-height: 102rpx;
		position: relative;
	}

	.info_item_bottom {
		width: 690rpx;
		height: auto;
		margin-left: 30rpx;
		line-height: 94rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;

		.check_group {
			position: absolute;
			top: 5rpx;
			left: 140rpx;
			font-size: 26rpx;

			.check_item {
				transform: scale(0.7);
			}
		}
	}

	.info_item {
		width: 690rpx;
		border-bottom: 1px solid #e9e9e9;
		margin-left: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		.Warptitle {
			margin: 44rpx 0 40rpx;
		}

		.selectEdit {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.client_type {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-bottom: 14rpx;
			// margin-left: 85rpx;
		}

		.info_img {
			width: 25rpx;
			height: 13rpx;
		}
	}
}

.head_text {
	width: 100%;
	height: 128rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 160rpx;
	text-align: center;
	// border-bottom: 20rpx solid #F7F7F7;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.currentType {
	background: #40a0f2;
	color: #ffffff;
}
.detailsImg {
	width: 700rpx;
	z-index: 20000 !important;
	max-height: calc(100vh - 100rpx);
	.datalisImg {
		z-index: 20000 !important;
		width: 100%;
		height: calc(100vh - 100rpx);
	}
}
</style>
